<template>
    <section>
        <ul class='ul_1' v-for="(item, index) in currObj.detail">
            <li>
                <table class='t1'>
                    <thead>
                        <tr>
                            <th style="width:150px">
                                <span v-if="item.technologyId!='600'">工艺类型:</span>
                                <span v-text="getTechnologyName(item.technologyId)" v-if="item.technologyId!='600'"></span>
                                <el-input style="width:80%" v-else size="small" placeholder="自定义工艺" v-model="item.technologyName">
                                </el-input>
                            </th>
                            <th>部位</th>
                            <th>描述</th>
                            <th>创建时间</th>
                            <th>操作</th>

                        </tr>
                    </thead>
                    <tbody>
                        <tr :key='technology.id' v-for="(technology, index2) in item.list">
                            <td>
                                <el-upload :data='test' class="avatar-uploader" :action="getAction(index2, index)" :show-file-list="false" :on-success="itemImgUp">
                                    <el-popover v-if="technology.imgUrl" ref="popover4" placement="right" width="400" trigger="hover">
                                        <img :src="technology.imgUrl" class='showImg'>
                                        <img slot="reference" :src="technology.imgUrl" class="itemImg">
                                    </el-popover>
                                    <i v-else class="el-icon-picture itemImg"></i>
                                </el-upload>
                            </td>
                            <td>
                                <el-input style="width:80%" size="small" placeholder="请输入内容" v-model.number="technology.part">
                                </el-input>

                            </td>
                            <td>
                                <el-input style="width:80%" size="small" placeholder="请输入内容" v-model="technology.memo">
                                </el-input>
                            </td>
                            <td>
                                <span v-text="getDate(technology.createTime)"></span>
                            </td>

                            <td>

                                <el-button size="small" @click="delItem(index2,item.list)">删除</el-button>


                            </td>

                        </tr>
                    </tbody>
                </table>

                <div style="text-align:right">
                    <el-button @click.prevent="addItem(item)" icon="plus" type="text">添加一行</el-button>
                    <el-button @click.prevent="delItem(item,currObj.detail)" icon="delete" type="text">删除工艺</el-button>
                </div>

            </li>
        </ul>

        <el-popover ref="popover4" placement="right" width="400" trigger="click">

            <div>
                <el-button class="btn_wage" v-for="technology in getTechnologyArray()" @click.prevent="addDetail(technology.id)" type="primary">{{technology.name}}</el-button>

            </div>
            <span slot="footer" class="dialog-footer">

  </span>
            <el-button slot="reference"> 新增工艺</el-button>
        </el-popover>

    </section>
</template>
<script src="./t400.js"></script>
<style>
 
    .avatar-uploader {
        height: 100px;
        overflow: hidden
    }

    .itemImg {

        font-size: 28px;
        color: #8c939d;
        width: 80px;
        height: 80px;

        text-align: center;
        margin: 10px;
        border: 1px solid #eee;
        background-position: center center;
        line-height: 80px
    }

    ul.ul_1 li {

        border: 1px solid #eee;
        margin: 5px;
        padding: 5px
    }

    table.t1 {
        border-collapse: collapse;
        width: 100%;
        border: 1px solid #cad9ea;
    }

    table.t1 thead {
        border: 1px solid #cad9ea;
        background-color: #eee;
    }

    table.t1 th {
        text-align: center;
        border: 1px solid #cad9ea;
        line-height: 40px;
    }

    table.t1 td {
        text-align: center;
        border: 1px solid #cad9ea;
        line-height: 60px;
    }

    table.t1 tr:hover {

        background-color: #eee;
    }

    .showImg {
        max-width: 800px;
        max-height: 800px;
    }
</style>